<nzi-form [formName]="functionForm" #functionFormComponent>
  <form nz-form [formGroup]="functionForm">
    <nz-form-item>
      <nz-form-label>应用</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="groupName" placeholder="应用名称" [maxlength]="20" readonly [disabled]="true">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>函数名称</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="functionName" placeholder="函数名称" [maxlength]="20" readonly [disabled]="true">
        <!--<nz-form-explain *ngIf="functionForm.get('functionName').dirty && functionForm.get('functionName').errors" class="from-help">
          <ng-container *ngIf="functionForm.get('functionName').errors && !functionForm.get('functionName').hasError('duplicated')">
            只能包含字母，数字、下划线和中划线；不能以数字、中划线开头；长度限制在2-20之间
          </ng-container>
          <ng-container *ngIf="functionForm.get('functionName').hasError('duplicated')">
            该名称已存在
          </ng-container>
        </nz-form-explain>-->
      </nz-form-control>
      <!--<p *ngIf="!getInvalidMessage('functionName')" class="help-text">
        只能包含字母，数字、下划线和中划线；不能以数字、中划线开头；长度限制在2-20之间</p>-->
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>运行环境</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="runtime" nzPlaceHolder="请选择运行环境" [nzDisabled]="true">
          <nz-option *ngFor="let object of runtimeList" [nzLabel]="object.value" [nzValue]="object.key">
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="fcsInstance.runtime != RuntimeCustomContainer">
      <nz-form-label>函数入口<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="handler" placeholder="index.handler" [maxlength]="255">
        <nzi-help *ngIf="fcsInstance.runtime?.indexOf('python') >= 0"
          [options]="{'title':'Handler 格式为 [文件名].[函数名]<br/>例如创建函数时指定的 Handler 为 index.handler，那么文件名为 index.py，入口函数为 handler。'}">
        </nzi-help>
        <nzi-help *ngIf="fcsInstance.runtime?.indexOf('nodejs') >= 0"
          [options]="{'title':'Handler 格式为 [文件名].[函数名]<br/>例如创建函数时指定的 Handler 为 index.handler，那么文件名为 index.js，入口函数为 handler。'}">
        </nzi-help>
      </nz-form-control>
    </nz-form-item>

    <ng-container *ngIf="fcsInstance.runtime == RuntimeCustomContainer">
      <nz-form-item>
        <nz-form-label nzRequired>选择镜像<span class="required-icon">*</span></nz-form-label>
        <nz-form-control>
          <nz-select class="form-input" formControlName="containerImage" nzPlaceHolder="请选择镜像" nzShowSearch
            [nzLoading]="imageListLoading">
            <nz-option *ngFor="let option of cirImageList" [nzLabel]="option.image" [nzValue]="option.image">
            </nz-option>
            <nz-option nzLabel="正在加载" nzValue="" nzDisabled *ngIf="imageListLoading"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>Command</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="containerCommand" placeholder="请输入容器启动命令">
          <nz-form-explain *ngIf="!getInvalidMessage('containerCommand')">
            string array，如：["python", "server.py"]
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>Args</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="containerArgs" placeholder="请输入容器启动参数">
          <nz-form-explain *ngIf="!getInvalidMessage('containerArgs')">
            string array，如：["--port", "8080"]
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>监听端口</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="containerPort" placeholder="8080">
          <nz-form-explain>
            端口范围 1~65535，不可使用端口 8012、8013、8022、9090、9091、9092。
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </ng-container>

    <nz-form-item>
      <nz-form-label>超时时间</nz-form-label>
      <nz-form-control>
        <nz-input-number formControlName="timeout" [nzMin]="3" [nzMax]="600" nz-popover nzContent="3-600秒" [nzStep]="1">
        </nz-input-number>秒
        <nzi-help [options]="{'title':'函数运行时长达到指定的超时时间后，函数会被自动中断，并暂停子进程、线程等的运行。范围：3-600秒。'}"></nzi-help>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>函数运行内存</nz-form-label>
      <nz-form-control>
        <nz-input-number formControlName="memorySize" [nzMin]="128" [nzMax]="3072" [nzStep]="128"
          [nzFormatter]="formatterMemorySize" nz-popover nzContent="128-3072MB">
        </nz-input-number>MB
        <nzi-help [options]="{'title':'函数运行时最大能使用的内存大小，最大3072MB。'}"></nzi-help>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="isShowSingle">
      <nz-form-label>单实例并发数量</nz-form-label>
      <nz-form-control>
        <nz-input-number formControlName="concurrency" [nzMin]="1" [nzMax]="20" nz-popover 
          [nzStep]="1">
        </nz-input-number>个
        <nzi-help [options]="{'title':'单个实例能够并发处理的请求数'}"></nzi-help>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>预留实例数量</nz-form-label>
      <nz-form-control>
        <nz-input-number formControlName="reserveNumber" [nzMin]="0" [nzMax]="5" nz-popover nzContent="0-5个"
          [nzStep]="1">
        </nz-input-number>个
        <nzi-help [options]="{'title':'预留实例是将函数实例的分配和释放交由用户管理，根据实例的运行时长计费。<br/>预留实例的执行环境是长驻的，彻底消除冷启动对业务的影响。'}">
        </nzi-help>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>环境变量</nz-form-label>
      <nz-form-control class="env-control-block">
        <!--环境变量表格start-->
        <app-environment-variables [isInForm]="true" [envVariableData]="envVariableData" [needValid]="needValid"
          (getEnvVariables)="getEnvVariables($event)"></app-environment-variables>
        <!--环境变量表格end-->
      </nz-form-control>
    </nz-form-item>

    <ng-container *ngIf="fcsInstance.runtime != RuntimeCustomContainer">
      <nz-form-item>
        <nz-form-label>初始化函数</nz-form-label>
        <nz-form-control>
          <nz-switch [(ngModel)]="isInitialize" formControlName="isInitialize" nzCheckedChildren="开启"
            nzUnCheckedChildren="关闭"></nz-switch>
          <nzi-help [options]="{'title':'配置初始化函数后需实现对应的 initializer 接口。'}">
          </nzi-help>
        </nz-form-control>
      </nz-form-item>
      <ng-container *ngIf="isInitialize">
        <div>
          <nz-form-item>
            <nz-form-control>
              <input nz-input formControlName="initializeHandler" placeholder="请输入函数初始化入口" [maxlength]="255">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <nz-input-number formControlName="initializeTimeout" [nzMin]="3" [nzMax]="300" nz-popover
                nzContent="3-300秒" [nzStep]="1">
              </nz-input-number>秒
              <nzi-help [options]="{'title':'初始化超时时间。'}">
              </nzi-help>
            </nz-form-control>
          </nz-form-item>
        </div>
      </ng-container>
    </ng-container>

    <nz-form-item *ngIf="isInternetAccess">
      <nz-form-label>公网访问</nz-form-label>
      <nz-form-control>
        <nz-switch formControlName="internetAccess" nzCheckedChildren="开启" nzUnCheckedChildren="关闭"></nz-switch>
        <nzi-help [options]="{'title':'使函数可以访问公网资源。'}"></nzi-help>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>私有网络<span class="required-icon" *ngIf="isVirtualAccess">*</span></nz-form-label>
      <nz-form-control>
        <nz-switch formControlName="virtualAccess" [(ngModel)]="isVirtualAccess"
          (ngModelChange)="virtualAccessChange($event)" nzCheckedChildren="开启" nzUnCheckedChildren="关闭"></nz-switch>
        <nzi-help [options]="{'title':'使函数可访问私有网络（VPC）中的资源，例如数据库，Redis 等。'}"></nzi-help>
        <ng-container *ngIf="isVirtualAccess">
          <div class="vpc-container">
            <nz-select formControlName="vpc" class="vpc-item" [class.has-error]="vpcError" [nzShowSearch]="true"
              nzShowSearch nzPlaceHolder="请选择虚拟私有网络" [nzLoading]="isLoadingVPC" nzNotFoundContent="没有可用的虚拟私有网络"
              [nzAutoClearSearchValue]="true" [(ngModel)]="vpcId" (ngModelChange)="vpcChange($event)">
              <nz-option *ngFor="let object of vpcList" [nzLabel]="object.vpc_name" [nzValue]="object.vpc_id">
              </nz-option>
            </nz-select>
            <nz-select formControlName="subnet" class="vpc-item" [class.has-error]="subnetError" [nzShowSearch]="true"
              nzShowSearch nzPlaceHolder="请选择子网" nzNotFoundContent="没有可用的子网" [nzAutoClearSearchValue]="true"
              [(ngModel)]="subnetId" (ngModelChange)="subnetChange($event)">
              <nz-option *ngFor="let object of subnetList" [nzLabel]="object.subnet_name" [nzValue]="object.subnet_id">
              </nz-option>
            </nz-select>
            <a href="javascript:void(0)" (click)="createVPC()">新建私有网络</a>
          </div>
        </ng-container>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>描述</nz-form-label>
      <nz-form-control>
        <textarea nz-input rows="4" formControlName="description" placeholder="请输入函数描述"></textarea>
        <ng-container *ngIf="getValidateForm('description').dirty && getValidateForm('description').errors">
          <nz-form-explain class="from-help input-group"
            *ngIf="functionForm.get('description').hasError('description')">
            最大支持500个英文字母、数字、空格、逗号、句号、中文
          </nz-form-explain>
        </ng-container>
        <nz-form-explain *ngIf="!(getValidateForm('description').dirty && getValidateForm('description').errors)">
          最大支持500个英文字母、数字、空格、逗号、句号、中文</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nzi-form>